<template>
  <div>
    <h1>用户管理</h1>
    <el-card class="mt-10" shadow="hover">
      <div class="flex-c">
        <div>
          <span>用户名:</span>
          <el-input v-model="searchParams.username" style="width: 240px" class="ml-10" clearable />
        </div>
        <div class="ml-20">
          <span>昵称:</span>
          <el-input v-model="searchParams.nickName" style="width: 240px" class="ml-10" clearable />
        </div>
        <div class="ml-20">
          <span>邮箱:</span>
          <el-input v-model="searchParams.email" style="width: 240px" class="ml-10" clearable />
        </div>
        <el-button type="primary" class="ml-30" @click="querySearch">查询</el-button>
      </div>
    </el-card>
    <el-card class="mt-15" shadow="hover">
      <div class="f-bold f-18">用户列表</div>
      <el-table :data="tableData" stripe style="width: 100%" class="mt-10">
        <el-table-column prop="username" label="用户名" width="180" />
        <el-table-column prop="nickName" label="昵称" width="180" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="headPic" label="头像">
          <template #default="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.headPic"
              fit="cover"
              :zoom-rate="1.2"
              v-if="scope.row.headPic"
              :preview-src-list="[scope.row.headPic]"
              :preview-teleported="true"
            />
          </template>
        </el-table-column>
        <el-table-column prop="isFrozen" label="状态">
          <template #default="scope">
            <el-tag type="danger" v-if="scope.row.isFrozen">已冻结</el-tag>
            <el-tag type="success" v-else>正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="action" label="操作">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)">冻结</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row justify="end" class="mt-15">
        <el-pagination
          background
          layout="prev, pager, next,total"
          :total="total"
          v-model:page-size="searchParams.pageSize"
          v-model:current-page="searchParams.pageNo"
          @change="changePage"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { queryUserList, freeze } from '@/api'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'userManage'
})

export interface ISearchParams {
  username: string
  nickName: string
  email: string
  pageNo: number
  pageSize: number
}

export interface IUserTable {
  id: number
  username: string
  nickName: string
  email: string
  headPic: string
  createTime: Date
  isFrozen: boolean
}

const searchParams = reactive<ISearchParams>({
  username: '',
  nickName: '',
  email: '',
  pageNo: 1,
  pageSize: 10
})

let tableData = ref<IUserTable | []>([])
let total = ref(0)

onMounted(() => {
  initData()
})

const initData = async () => {
  const res = await queryUserList(searchParams)
  if (res.status === 200 || res.status === 201) {
    const { data } = res.data
    tableData.value = data.users
    total.value = data.totalCount
  }
}

const querySearch = () => {
  searchParams.pageNo = 1
  initData()
}

const changePage = (currentPage: number, pageSize: number) => {
  searchParams.pageNo = currentPage
  searchParams.pageSize = pageSize
  initData()
}

const handleEdit = async (row: IUserTable) => {
  const res = await freeze(row.id)
  if (res.status === 200 || res.status === 201) {
    ElMessage.success('操作成功')

    initData()
  }
}
</script>

<style scoped></style>
